@extends('admin.layout.app')

@section('style')
<!-- fontIconPicker core CSS -->
<link rel="stylesheet" type="text/css" href="{{asset('vendor/fonticonpicker/css/base/jquery.fonticonpicker.min.css')}}" />

<!-- required default theme -->
<link rel="stylesheet" type="text/css" href="{{asset('vendor/fonticonpicker/css/themes/grey-theme/jquery.fonticonpicker.grey.min.css')}}" />
{{-- <link rel="stylesheet" type="text/css" href="{{asset('vendor/fontello/css/fontello.css')}}" /> --}}
<link rel="stylesheet" type="text/css" href="{{asset('vendor/icomoon/style.css')}}" />

<!-- optional themes -->
<link rel="stylesheet" type="text/css" href="{{asset('vendor/fonticonpicker/css/themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.min.css')}}" />
<link rel="stylesheet" type="text/css" href="{{asset('vendor/fonticonpicker/css/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css')}}" />
<link rel="stylesheet" type="text/css" href="{{asset('vendor/fonticonpicker/css/themes/inverted-theme/jquery.fonticonpicker.inverted.min.css')}}" />
@endsection

@section('content')

    <div class="layui-fluid">

        <div class="layui-row layui-col-space15">

            <div class="layui-col-lg12">
                <div class="layui-card">
                    <div class="layui-card-header">基礎表單篩選功能</div>
                    <div class="layui-card-body">
                        <div class="layui-form">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">文章ID</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">作者</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="author" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">标题</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">文章标签</label>
                                    <div class="layui-input-inline">
                                        <select name="label">
                                            <option value="">请选择标签</option>
                                            <option value="0">美食</option>
                                            <option value="1">新闻</option>
                                            <option value="2">八卦</option>
                                            <option value="3">体育</option>
                                            <option value="4">音乐</option>
                                        </select>
                                        <div class="layui-unselect layui-form-select">
                                            <div class="layui-select-title">
                                                <input type="text" placeholder="请选择标签" value="" readonly=""
                                                       class="layui-input layui-unselect">
                                                <i class="layui-edge"></i>
                                            </div>
                                            <dl class="layui-anim layui-anim-upbit">
                                                <dd class="layui-select-tips">请选择标签</dd>
                                                <dd>美食</dd>
                                                <dd>新闻</dd>
                                                <dd>八卦</dd>
                                                <dd>体育</dd>
                                                <dd>音乐</dd>
                                            </dl>
                                        </div>
                                    </div>
                                    <button class="layui-btn">
                                        <i class="layui-icon layui-icon-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div style="padding-bottom: 10px;">
                            <button class="layui-btn layui-btn-primary">正常</button>
                            <button class="layui-btn">默認</button>
                            <button class="layui-btn layui-btn-warm">警示</button>
                            <button class="layui-btn layui-btn-danger">危險</button>
                            <button class="layui-btn layui-btn-normal">普通</button>
                            <button class="layui-btn layui-btn-disabled">禁用</button>
                        </div>
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th>昵称</th>
                                <th>加入时间</th>
                                <th>签名</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>贤心</td>
                                <td>2016-11-29</td>
                                <td>人生就像是一场修行</td>
                            </tr>
                            <tr>
                                <td>许闲心</td>
                                <td>2016-11-28</td>
                                <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="layui-col-lg12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <input type="text" class="iconpicker" >
                    </div>
                </div>
            </div>

            <div class="layui-col-lg12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <blockquote class="layui-elem-quote">
                            向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。
                        </blockquote>
                        <fieldset class="layui-elem-field">
                            <legend>按鈕大小</legend>
                            <div style="margin: 20px 30px 10px;">
                                <button class="layui-btn layui-btn-lg layui-btn-primary">最大</button>
                                <button class="layui-btn">默認大小</button>
                                <button class="layui-btn layui-btn-sm layui-btn-normal">小按鈕</button>
                                <button class="layui-btn layui-btn-xs layui-btn-warm">超小按鈕</button>
                            </div>
                            <div style="margin: 15px 30px">
                                <button class="layui-btn layui-btn-fluid layui-btn-normal">占一行的按鈕</button>
                            </div>
                        </fieldset>
                        <fieldset class="layui-elem-field" style="margin-top:40px;">
                            <legend>圓角按鈕</legend>
                            <div style="margin: 20px 30px 10px;">
                                <button class="layui-btn layui-btn-radius layui-btn-primary btn-">正常</button>
                                <button class="layui-btn layui-btn-radius">默認</button>
                                <button class="layui-btn layui-btn-radius layui-btn-warm">警示</button>
                                <button class="layui-btn layui-btn-radius layui-btn-danger">危險</button>
                                <button class="layui-btn layui-btn-radius layui-btn-normal">普通</button>
                                <button class="layui-btn layui-btn-radius layui-btn-disabled">禁用</button>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>

            <div class="layui-col-lg12">
                <div class="layui-card">
                    <div class="layui-card-header">選項卡類別-3級菜單</div>
                    <div class="layui-card-body">

                        <div class="layui-tab">
                            <ul class="layui-tab-title">
                                <li class="layui-this">网站设置</li>
                                <li>用户管理</li>
                                <li>权限分配</li>
                                <li>商品管理</li>
                                <li>订单管理</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">内容1</div>
                                <div class="layui-tab-item">内容2</div>
                                <div class="layui-tab-item">内容3</div>
                                <div class="layui-tab-item">内容4</div>
                                <div class="layui-tab-item">内容5</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="layui-col-lg12">
                <blockquote class="layui-elem-quote"> UEditor </blockquote>
                <pre class="layui-code">
@verbatim
@include('vendor.ueditor.assets')
&lt;!-- 实例化编辑器 -->
&lt;script type='text/javascript'>
    var ue = UE.getEditor('container', {lang:"zh-hk" });
    ue.ready(function() {
        ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.
    });
&lt;/script>

&lt;!-- 编辑器容器 -->
&lt;script id='container' name='content' type='text/plain'></script>
@endverbatim
</pre>
                @include('vendor.ueditor.assets')
                <!-- 实例化编辑器 -->
                <script type="text/javascript">
                var ue = UE.getEditor('container', {
                    lang: "zh-hk",
                    // serverUrl: '/abc'
                });
                ue.ready(function() {
                    ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.
                });
                </script>

                <!-- 编辑器容器 -->
                <script id="container" name="content" type="text/plain"></script>
            </div>

        </div>
    </div>
@endsection



@section('script')
<script type="text/javascript" src="{{asset('/vendor/fonticonpicker/js/jquery.fonticonpicker.min.js')}}"></script>
{{-- <script type="text/javascript" src="{{asset('/vendor/fonticonpicker/js/fonticons.config.js')}}"></script> --}}
<script>
$(function() {
    // $.getJSON('{{asset('/vendor/fontello/config.json')}}', function(response) {
    //     console.log(response);
    //     var fontello_json_icons = [];
    //     $.each(response.glyphs, function(i, v) {
    //         fontello_json_icons.push( response.css_prefix_text + v.css );
    //     });
    //     console.log(fontello_json_icons);

    //     $('.iconpicker').fontIconPicker({
    //         source:fontello_json_icons,
    //         // theme: 'fip-darkgrey'
    //     });
    // });

    $.getJSON('{{asset('/vendor/icomoon/selection.json')}}', function(response) {
        // console.log(response);

        // Get the class prefix
        var classPrefix = response.preferences.fontPref.prefix,
            icomoon_json_icons = [],
            icomoon_json_search = [];

        // For each icon
        $.each(response.icons, function(i, v) {

            // Set the source
            icomoon_json_icons.push( classPrefix + v.properties.name );

            // Create and set the search source
            if ( v.icon && v.icon.tags && v.icon.tags.length ) {
                icomoon_json_search.push( v.properties.name + ' ' + v.icon.tags.join(' ') );
            } else {
                icomoon_json_search.push( v.properties.name );
            }
        });

        $('.iconpicker').fontIconPicker({
            source:icomoon_json_icons,
            // theme: 'fip-darkgrey'
        });
    });
});
</script>
@endsection
